import { GoToDocsButton } from '../component/GoToDocsButton';

<GoToDocsButton
  href="https://tolgee.io/js-sdk/integrations/svelte/installation"
  style={{ float: 'right' }}
/>

To read full documentation about Tolgee for Svelte, visit [docs](https://tolgee.io/js-sdk/integrations/svelte/installation).

## Install the packages

You will need `@tolgee/svelte` to use `<T>` component or `getTranslate` function.

```sh
npm i @tolgee/svelte
```

## Setup your environment (with SvelteKit)

Add this to your `.env.development.local`.

```dotenv
VITE_TOLGEE_API_URL={{{apiUrl}}}
VITE_TOLGEE_API_KEY={{{apiKey}}}
```

## Use TolgeeProvider

Wrap your main `App` component with Tolgee provider.

```html
<script>
  import { TolgeeProvider, Tolgee, DevTools, FormatSimple } from '@tolgee/svelte';

  const tolgee = Tolgee()
    .use(DevTools())
    .use(FormatSimple())
    .init({
      language: 'en',

      // for development
      apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
      apiKey: import.meta.env.VITE_TOLGEE_API_KEY,

      // for production
      staticData: {
        ...
      }
    });
</script>

<TolgeeProvider tolgee="{tolgee}">
  <div slot="fallback">Loading...</div>
  <slot />
</TolgeeProvider>
```

## Use Tolgee!

```html
<script>
  import { T, getTranslate } from '@tolgee/svelte';

  const { t } = getTranslate();
</script>

<T keyName="key" defaultValue="This is default" />

<!-- OR -->

{$t("this_is_a_key")}
```

Now you are able to translate texts with Alt + Clicking them!

## Prepare for production

To prepare your App for production, choose a suitable option described
[here](https://tolgee.io/js-sdk/integrations/svelte/installation#preparing-for-production).
